<template>
  <div>
    <h1>setup</h1>
    <h2> {{ str }}---{{ str2 }} </h2>
    <input type="text" v-model="str">
    <input type="text" v-model="str2">
    <button @click="handle">click</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
// defineComponent 自定义一个组件
export default defineComponent({
  //  vue2中叫选项式api 需要在规定的选项块（data,method,computed,watch...）
  //  vue3 组合式api，可以通过引入的函数 方法来书写代码 只需要书写到setup()函数中即可(ref,rective,computed)
  // setup的作用：1.组合式api的入口,只在初始化的时候执行一次 2.setup 是处在生命周期beforecreate和created之间，setup无法使用data,this 3.setup中定义的函数变量都要return出去 否则用不了
  setup() {
    // 定义一个响应式数据 
    const str = ref('小鞠')
    // 不是响应式数据
    const str2 = '鞠'
    // 定义一个方法
    const handle = () => {
      console.log('vue3', str.value)
    }

    // 定义的变量 方法需要return出来才能使用 
    return { str, str2, handle }
  }
})
</script>

<style lang="scss" scoped></style>